<template>
  <view @touchmove.stop.prevent="() => {}">
    <u-popup @close="state.isShowSharePopup = false" :show="state.isShowSharePopup" mode="center">
      <view class="canvas_box" :style="{ height: canvasH + 'px', width: canvasW + 'px' }">
        <canvas
          canvas-id="collection"
          :style="{
            width: poster.width + 'px',
            height: poster.height + 'px',
          }"
        />
      </view>
      <view class="canvas_box" :style="{ height: canvasH + 'px', width: canvasW + 'px' }">
        <image :src="posterContent.klineUrl" :style="{ height: canvasH + 'px', width: canvasW + 'px' }" />
      </view>
      <view class="bottom_box">
        <view class="bottom_box_content">
          <!--  #ifndef APP-PLUS -->
          <!-- 微信 -->
          <view class="bottom_box_content_item" @tap="systemsShare">
            <view class="popup-box" style="background: #65d020">
              <u-icon name="icon-weixin" custom-prefix="icon" size="25" color="#fff" />
            </view>
            <view class="popup-text">{{ $t('wallet_wechat') }}</view>
          </view>
          <!-- QQ -->
          <view class="bottom_box_content_item" @tap="systemsShare">
            <view class="popup-box" style="background: #4baaff">
              <c-icon name="iconQQ" size="25" color="#fff" />
            </view>
            <view class="popup-text">QQ</view>
          </view>
          <!-- 新浪 -->
          <view class="bottom_box_content_item" @tap="systemsShare">
            <view class="popup-box" style="background: #fe9933">
              <c-icon name="iconxinlangweibo" size="25" color="#fff" />
            </view>
            <view class="popup-text">{{ $t('app_sina_Weibo') }}</view>
          </view>
          <!-- 电报 -->
          <view class="bottom_box_content_item" @tap="systemsShare">
            <view class="popup-box" style="background: #4b5fe2">
              <c-icon name="icontelegarm" size="25" color="#fff" />
            </view>
            <view class="popup-text">Telegram</view>
          </view>
          <!-- #endif -->
          <!-- 保存图片 -->
          <view class="bottom_box_content_item" @tap="saveToAlbum">
            <view class="popup-box save-bg">
              <c-icon name="iconxiangce1" size="25" color="#fff" />
            </view>
            <view class="popup-text">{{ $t('app_save_picture') }}</view>
          </view>
          <!-- 系统分享 -->
          <!-- <view class="bottom_box_content_item" @tap="systemsShare">
              <view class="popup-box copy-bg">
                <c-icon name="iconxitongfenxiang" size="25" color="#fff"></c-icon>
              </view>
              <view class="popup-text">{{ $t('systems_analysis') }} </view>
            </view> -->
        </view>
        <view class="bottom_box_content_spacing" />
        <view class="cancle_box" @tap="state.isShowSharePopup = false">
          <text class="cancle_box_text">{{ $t('app_cancel') }}</text>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import { getSharePoster } from '@/utils/libs/QuShe-SharerPoster/QS-SharePoster/QS-SharePoster'
import { saveImage } from '@/utils/uni/media'
export default {
  name: 'Com-Share',
  computed: {
    ...mapState(['systemInfo']),
    canvasW() {
      return this.px2cpx(this.designWidth)
    },
    canvasH() {
      return this.px2cpxH(this.designHeight)
    },
  },
  data() {
    return {
      state: {
        isShowSharePopup: true,
      },
      poster: {}, // 海报实例
      imgURl: '', // 海报url
      designWidth: 620, // 设计稿宽度
      designHeight: 1100, // 设计稿高度
      posterContent: {},
    }
  },
  methods: {
    // 分享
    shareImage(type, sceneType) {
      this.$emit('shareImage', type, sceneType, this.imgURl)
    },
    // 保存照片
    saveToAlbum() {
      saveImage(this.imgURl)
    },
    // 系统分享
    systemsShare() {
      uni.saveFile({
        tempFilePath: this.imgURl,
        success: (res) => {
          var savedFilePath = res.savedFilePath
          plus.share.sendWithSystem({ pictures: [savedFilePath] }, () => {
            this.$emit('cancle')
          })
        },
        fail: () => {
          if (!this.imgURl) {
            this.$utils.toast(this.$t('app_failed_share'))
          }
        },
      })
    },
    /**
     * @desc 设计稿长度转换为自适应屏幕宽高 px => custom px
     * @param {number} number 设计稿的长度
     * @return {Number}
     */
    px2cpx(number = 0) {
      return Math.floor((this.systemInfo.screenWidth * number) / 750)
    },
    px2cpxH(number = 0) {
      return Math.floor((this.systemInfo.screenHeight * number) / 1334)
    },
    // 生成海报
    async createPoster() {
      const that = this
      const d = await getSharePoster({
        _this: that, //若在组件中使用 必传
        type: 'share', //自定义标识
        background: {
          //设置自定义背景画布, 若传该属性则背景图失效
          height: that.canvasH, //画布高度
          width: that.canvasW, //画布宽度
          backgroundColor: '#ffffff', //背景颜色
        },
        setCanvasToTempFilePath: {
          quality: 1,
          destWidth: that.canvasW * that.systemInfo.pixel,
          destHeight: that.canvasH * that.systemInfo.pixel,
          fileType: 'png',
        },
        setCanvasWH({
          //一般必传， 动态设置canvas宽高
          bgObj,
        }) {
          that.poster = bgObj
        },
        drawArray: () => {
          return new Promise((rs) => {
            rs([
              {
                type: 'image',
                url: that.posterContent.klineUrl,
                dx: 0,
                dy: 0,
                dWidth: that.canvasW,
                dHeight: that.canvasH,
              },
              {
                type: 'image',
                url: require('@/static/images/logo.png'),
                dx: 0,
                dy: that.px2cpxH(that.designHeight - 110),
                dWidth: that.canvasW,
                dHeight: that.px2cpxH(110),
              },
              {
                type: 'image',
                url: that.posterContent.qrCodeUrl, // qrCodeUrl不能为null
                dx: that.px2cpx(510),
                dy: that.px2cpxH(that.designHeight - 80),
                dWidth: that.px2cpx(80),
                dHeight: that.px2cpx(80),
              },
            ])
          })
        },
        posterCanvasId: 'collection', //canvasId
        // delayTimeScale: 0, //延时系数
      })
      // 海报url
      this.imgURl = d.poster.tempFilePath
    },
    // 截屏方法
    onScreenCapture() {
      const pages = getCurrentPages()
      const page = pages[pages.length - 1]
      const currentWebview = page.$getAppWebview()
      const bitmap = new plus.nativeObj.Bitmap()
      // 将webview内容绘制到Bitmap对象中
      currentWebview.draw(bitmap, () => {
        bitmap.save(
          '_doc/a.png',
          {
            quality: 100,
            format: 'png',
          },
          (i) => {
            uni.saveFile({
              tempFilePath: i.target,
              success: (res) => {
                const savedFilePath = res.savedFilePath
                this.posterContent.klineUrl = savedFilePath
                this.state.isShowSharePopup = true
                this.createPoster()
              },
            })
          }
        )
      })
    },
    // 获取二维码
    async getAppDownloadQrCodePath() {
      const res = await this.$api.exchangeApi.getAppDownloadQrCodePath()
      const { success, msg, obj } = res
      if (success) {
        if (obj) {
          for (const key in obj) {
            if (key === 'android') {
              this.posterContent.qrCodeUrl = `${this.$config['OSS_URL']}/${obj[key]}`
            }
          }
        }
      } else {
        this.$utils.toast(this.$t(msg))
      }
      return res
    },
    // 分享
    async onShare() {
      // if (!this.posterContent.qrCodeUrl) {
      //   const res = await this.getAppDownloadQrCodePath()
      //   if (!res.success) {
      //     return
      //   }
      // }
      this.onScreenCapture()
    },
  },
}
</script>

<style lang="scss" scoped>
.canvas_box {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  border-radius: 20rpx;
}

.bottom_box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: 10px 10px 0 0;
  background-color: #fff;

  .bottom_box_content {
    display: flex;
    width: 100%;
    padding: 20rpx 0rpx;

    .bottom_box_content_item {
      // height: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 25%;
      line-height: 1;

      .popup-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-bottom: 12px;
        border-radius: 50%;
      }

      .popup-text {
        color: #444;
        font-size: 12px;
      }

      .copy-bg {
        background: #3f81ff;

        // margin-right: 50px;
      }

      .save-bg {
        background: #ffc300;
      }

      text {
        font-size: 12px;
      }
    }
  }

  .bottom_box_content_spacing {
    width: 100%;
    height: 6px;
    background-color: #fdfafe;
  }

  .cancle_box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 88rpx;

    .cancle_box_text {
      color: #333;
      font-size: 14px;
    }
  }
}

::v-deep .u-mode-center-box {
  background-color: transparent;
}
</style>
